<template>
  <div>
    <el-row class="top-nav-bar">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="">
        <el-menu-item index="1"><span class="top-nav-bar-title">全部推荐</span></el-menu-item>
        <el-menu-item index="2" disabled><span class="top-nav-bar-title"><i class="el-icon-user-solid"></i>推荐作者</span></el-menu-item>
        <el-menu-item index="3" disabled><span class="top-nav-bar-title"><i class="el-icon-menu"></i>推荐专题</span></el-menu-item>
      </el-menu>
    </el-row>


    <div v-for="media in medias">
      <el-row class="recommend-list-body">
        <el-col :span="19" >

          <el-row class="body-content-recommend"><i class="el-icon-thumb"></i>&nbsp;简书推荐专题</el-row>
          <el-row class="body-content-main">
            <el-col :span="3">
              <el-image
                  style="width: 52px; height: 52px"
                  :src="media.img"
                  :fit="'cover'">
              </el-image>
            </el-col>
            <el-col :span="20">
              <el-row class="body-content-main-title">{{media.title}}</el-row>
              <el-row class="body-content-main-content">{{media.content}}</el-row>
              <el-row class="body-content-main-status">
                <i class="el-icon-notebook-2"></i>
                <span>{{media.stock}}篇文章</span><span>&nbsp;·&nbsp;{{media.follow}}人关注</span>
              </el-row>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="5" class="body-content-subscribe">
          <a href="javascript:void(0)" @click="followAlbum(media.title)">+关注</a>
        </el-col>
      </el-row>

      <el-divider/>

    </div>

  </div>
</template>

<script>
  export default {
    name: "RecommendItem",
    data() {
      return {
        activeIndex: '1',

        medias: [
          {
            title: '故事',
            content: '故事专题，不论是旅行生活中亲身经历的真实故事，还是童话玄幻遐想的...',
            stock: '171.1k',
            follow: '212.1k',
            img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/media-object/small-cover-1.jpg'
          },
          {
            title: '摄影',
            content: '《摄影》专题介绍 用文字记录美好生活 用镜头捕捉精彩瞬间 摄影，...',
            stock: '151.1k',
            follow: '2732.1k',
            img: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/media-object/small-cover-2.jpg'
          },
        ]
      }
    },
    methods: {
      followAlbum(album) {
        alert('已关注:'+album)
      }
    }

  }
</script>

<style scoped lang="less">
  .top-nav-bar {
    margin-left: 35px;
  }



  .top-nav-bar-title{
    font-size: 15px;
    font-weight: 700;
    color: #646464;
    width: 300px;
  }

  .recommend-list-body {
    margin-left: 35px;
    margin-top: 15px;

    width: 95%;
  }

  .body-content-recommend {
    color: #ec6e56;
    font-size: 13px;
  }

  .el-image {
    border-radius: 4px;
    border: #ddd solid 1px;
    margin-left: 5px;
  }

  .body-content-main {
    margin-top: 10px;
  }

  .body-content-main-title {
    font-size: 15px;
    color: #333333;
    font-weight: 700;
  }
  .body-content-main-content {
    font-size: 12px;
    color: #969696;
    margin-top: 5px;

  }
  .body-content-main-status {
    font-size: 12px;
    color: #969696;
    margin-top: 5px;
    margin-bottom: -10px;

  }

  .body-content-subscribe {
    text-align:center;
    width: 11%;
    font-size: 17px;
    border: #ea6f5a 1px solid;
    border-radius: 15px;
    >a{
      color: #ea6f5a;
      text-decoration:none;
    }
  }

  .el-divider{
    margin-left: 35px;
    width: 95%;
  }
</style>